<template>
    <!-- pages/join/join.wxml -->
    <view class="container">
        <view class="form" v-if="!success">
            <van-cell-group>
                <van-field label="预约场地" v-model="roomName" />
            </van-cell-group>
            <van-cell-group>
                <van-field label="手机号" v-model="phone" placeholder="请填写手机号" maxlength="11" />
            </van-cell-group>
            <van-cell-group>
                <van-cell title="开始时间">
                    <picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
                        {{ startTime }}
                        <!-- <view class="triangle_border_down"> </view> -->
                    </picker>
                </van-cell>
            </van-cell-group>
            <van-cell-group>
                <van-cell title="结束时间">
                    <picker mode="multiSelector" @change="bindMultiPickerChanges" @columnchange="bindMultiPickerColumnChanges" :value="multiEndIndex" :range="multiArray">
                        {{ endTime }}
                        <!-- <view class="triangle_border_down" > </view> -->
                    </picker>
                </van-cell>
            </van-cell-group>
        </view>

        <view class="btns">
            <button hover-class="button-click" class="btn submit bg-primary" @tap="submit">提交申请</button>
        </view>
    </view>
</template>

<script>
const datepicker = require('../../utils/datepicker');
const app = getApp();
var http = require('../../utils/http');
var lock = require('../../utils/lock.js');
export default {
    data() {
        return {
            startTime: '选择开始时间',
            endTime: '选择结束时间',
            multiArray: [],
            multiIndex: [],
            multiEndIndex: [],
            year: '',
            month: '',
            day: '',
            hour: '',
            minute: '',
            roomId: '',
            roomName: '',
            name: '',
            phone: '',
            success: ''
        };
    },
    onLoad: function (options) {
        console.log(options);
        if (options.id) {
            this.setData({
                roomId: options.id,
                roomName: options.roomName
            });
        }
    },
    onShow: function () {
        var loadPickerData = datepicker.loadPickerData();
        var getCurrentDate = datepicker.getCurrentDate();
        var GetMultiIndex = datepicker.GetMultiIndex();
        let year = parseInt(getCurrentDate.substring(0, 4));
        let month = parseInt(getCurrentDate.substring(5, 7));
        let day = parseInt(getCurrentDate.substring(8, 10));
        let hour = parseInt(getCurrentDate.substring(11, 13));
        let minute = parseInt(getCurrentDate.substring(14, 16));
        this.setData({
            multiArray: loadPickerData,
            multiIndex: GetMultiIndex,
            multiEndIndex: GetMultiIndex,
            startTime: getCurrentDate,
            year: year,
            month: month,
            day: day,
            hour: hour,
            minute: minute
        });
    },
    methods: {
        bindMultiPickerChange: function (e) {
            this.setData({
                multiEndIndex: e.detail.value
            });
            const index = this.multiIndex;
            const year = this.multiArray[0][index[0]];
            const month = this.multiArray[1][index[1]];
            const day = this.multiArray[2][index[2]];
            const hour = this.multiArray[3][index[3]];
            const minute = this.multiArray[4][index[4]];
            this.setData({
                startTime: `${year.replace('年', '/')}${month.replace('月', '/')}${day.replace('日', '')} ${hour.replace('时', '')}:${minute.replace('分', '')}`,
                year: year,
                month: month,
                day: day,
                hour: hour,
                minute: minute
            });
        },

        bindMultiPickerChanges: function (e) {
            this.setData({
                multiEndIndex: e.detail.value
            });
            const index = this.multiIndex;
            const year = this.multiArray[0][index[0]];
            const month = this.multiArray[1][index[1]];
            const day = this.multiArray[2][index[2]];
            const hour = this.multiArray[3][index[3]];
            const minute = this.multiArray[4][index[4]];
            this.setData({
                endTime: `${year.replace('年', '/')}${month.replace('月', '/')}${day.replace('日', '')} ${hour.replace('时', '')}:${minute.replace('分', '')}`,
                year: year,
                month: month,
                day: day,
                hour: hour,
                minute: minute
            });
        },

        bindMultiPickerColumnChange: function (e) {
            let getCurrentDate = datepicker.getCurrentDate();
            let currentYear = parseInt(getCurrentDate.substring(0, 4));
            let currentMonth = parseInt(getCurrentDate.substring(5, 7));
            let currentDay = parseInt(getCurrentDate.substring(8, 10));
            let currentHour = parseInt(getCurrentDate.substring(11, 13));
            let currentMinute = parseInt(getCurrentDate.substring(14, 16));
            var data = {
                multiArray: this.multiArray,
                multiIndex: this.multiIndex
            };
            data.multiIndex[e.detail.column] = e.detail.value;
            let monthArr;
            let dayArr;
            let hourArr;
            let minuteArr;
            switch (e.detail.column) {
                case 0:
                    // 修改年份列
                    let yearSelected = parseInt(this.multiArray[e.detail.column][e.detail.value]);
                    this.setData({
                        year: yearSelected
                    });
                    if (yearSelected == currentYear) {
                        var loadPickerData = datepicker.loadPickerData();
                        this.setData({
                            multiArray: loadPickerData,
                            multiIndex: [0, 0, 0, 0, 0]
                        });
                    } else {
                        monthArr = datepicker.loadMonths(1, 12);
                        dayArr = datepicker.loadDays(yearSelected, 1, 1);
                        hourArr = datepicker.loadHours(0, 23);
                        minuteArr = datepicker.loadMinutes(0, 59);
                        this.setData({
                            ['multiArray[1]']: monthArr,
                            ['multiArray[2]']: dayArr,
                            ['multiArray[3]']: hourArr,
                            ['multiArray[4]']: minuteArr,
                            multiIndex: [e.detail.value, 0, 0, 0, 0]
                        });
                    }
                    break;
                case 1:
                    // 修改月份列
                    let mon = parseInt(this.multiArray[e.detail.column][e.detail.value]);
                    this.setData({
                        month: mon
                    });
                    if (this.year == currentYear && mon == currentMonth) {
                        dayArr = datepicker.loadDays(currentYear, mon, currentDay);
                    } else {
                        dayArr = datepicker.loadDays(this.year, mon, 1);
                    }
                    hourArr = datepicker.loadHours(0, 23);
                    minuteArr = datepicker.loadMinutes(0, 59);
                    this.setData({
                        ['multiArray[2]']: dayArr,
                        ['multiArray[3]']: hourArr,
                        ['multiArray[4]']: minuteArr,
                        multiIndex: [this.multiIndex[0], e.detail.value, 0, 0, 0]
                    });
                    break;
                case 2:
                    // 修改日
                    let dd = parseInt(this.multiArray[e.detail.column][e.detail.value]);
                    this.setData({
                        day: dd
                    });
                    if (dd == currentDay && this.year == currentYear && this.month == currentMonth) {
                        hourArr = datepicker.loadHours(currentHour, 24);
                        minuteArr = datepicker.loadMinutes(currentMinute, 59);
                    } else {
                        hourArr = datepicker.loadHours(0, 24);
                        minuteArr = datepicker.loadMinutes(0, 59);
                    }
                    this.setData({
                        ['multiArray[3]']: hourArr,
                        ['multiArray[4]']: minuteArr,
                        multiIndex: [this.multiIndex[0], this.multiIndex[1], e.detail.value, 0, this.multiIndex[4]]
                    });
                    break;
                case 3:
                    // 修改时
                    let hh = parseInt(this.multiArray[e.detail.column][e.detail.value]);
                    let currentMinuteIndex = this.multiIndex[4];
                    this.setData({
                        hour: hh
                    });
                    if (hh == currentHour && this.year == currentYear && this.month == currentMonth && this.day == currentDay) {
                        minuteArr = datepicker.loadMinutes(currentMinute, 59);
                    } else {
                        minuteArr = datepicker.loadMinutes(0, 59);
                    }
                    this.setData({
                        ['multiArray[4]']: minuteArr,
                        multiIndex: [this.multiIndex[0], this.multiIndex[1], this.multiIndex[2], e.detail.value, currentMinuteIndex]
                    });
                    break;
                case 4:
                    // 修改分
                    let mi = parseInt(this.multiArray[e.detail.column][e.detail.value]);
                    this.setData({
                        minute: mi,
                        multiIndex: [this.multiIndex[0], this.multiIndex[1], this.multiIndex[2], this.multiIndex[3], e.detail.value]
                    });
                    break;
            }
            console.log(this.multiArray);
        },

        bindMultiPickerColumnChanges: function (e) {
            this.bindMultiPickerColumnChange(e);
        },

        inputName: function (e) {
            this.setData({
                name: e.detail.value
            });
        },

        inputPhone: function (e) {
            this.setData({
                phone: e.detail.value
            });
        },

        // 提交
        submit() {
            var that = this;
            if (that.endTime == '选择结束时间') {
                uni.showModal({
                    content: '请选择结束时间',
                    showCancel: false
                });
                return;
            }
            if (!that.phone) {
                uni.showModal({
                    content: '请填写手机号',
                    showCancel: false
                });
                return;
            }
            http.request(
                '/member/manager/submitOrder',
                '1',
                'post',
                {
                    roomId: that.roomId,
                    startTime: that.startTime,
                    endTime: that.endTime,
                    mobile: that.phone
                },
                app.globalData.userDatatoken.accessToken,
                '',
                function success(info) {
                    console.info('返回111===');
                    console.info(info);
                    if (info.code == 0) {
                        uni.showToast({
                            title: '操作成功',
                            icon: 'success'
                        });
                        uni.navigateBack({
                            delta: 1 // 返回的页面数，这里表示返回上一页
                        });
                    } else {
                        uni.showModal({
                            content: info.msg,
                            showCancel: false
                        });
                    }
                },
                function fail(info) {}
            );
        }
    }
};
</script>
<style>
@import './placeOrder.css';
</style>
